<template>
    <div>
        <Drawer :closable="false" width="300" v-model="viewShow">
            <p :style="pStyle">数据字典信息详情</p>
            <p :style="pStyle">字典类型</p>
            <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                        {{dictForm.type}}
                    </Col>
                </Row>
            </div>
            <Divider />
            <p :style="pStyle">字典编码</p>
            <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                        {{dictForm.code}}
                    </Col>
                </Row>
            </div>
            <Divider />
            <p :style="pStyle">字典数值</p>
            <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                        {{dictForm.value}}
                    </Col>
                </Row>
            </div>
            <Divider />
            <p :style="pStyle">字典描述</p>
            <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                        {{dictForm.text}}
                    </Col>
                </Row>
            </div>
        </Drawer>
    </div>
</template>
<script>
    import {getDict} from '../../../api/sys/dict/dict-api';
    export default {
        name: 'viewDict',
        props: {
            id: {
                type: String
            },
            value: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                dictForm: {
                    id:this.id,
                    type: '',
                    text: '',
                    code: '',
                    value:''
                },
                viewShow: this.value,
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                }
            };
        },
        watch: {
            value(val) {
                this.viewShow = val;
            },
            viewShow(val) {
                console.log(val+'------');
                if(val){
                    let id = this.id;
                    getDict({id:id}).then(res=>{
                        if(res.result){
                            this.dictForm = res.entity;
                        }else{
                            this.$Message.success(res.msg);
                            this.closeModal(false);
                        }
                    });
                }else{// 反之则关闭页面
                    this.closeModal(val);
                }
            }
        },
        methods: {
            closeModal(val){
                this.$emit('input', val);
            }
        }
    };
</script>
<style>
    .demo-drawer-profile{
        font-size: 14px;
    }
</style>